import React, { Component } from 'react';
import { Collapse, Upload, Modal } from 'antd';
import { connect } from 'dva';
import router from 'umi/router';
import classNames from 'classnames';
import { queryFileList, formatPrice } from '@/utils/common';
import DetailsList from '@/components/DetailsList';
import { formatCodeVal } from '@/pages/Common/common';

const Panel = Collapse.Panel;

@connect(({ verification, loading, common }) => ({
  verification,
  loading: loading.models.verification,
  dictObject: common.dictObject,
}))
export default class VerificationDetail extends Component {
  constructor(props) {
    super(props);
    this.state = {
      activeKey: ['1'],
      fileList: [],
      id: 0,
    };
    this.paneSize = [1];
  }

  queryFileList = id => {
    queryFileList({
      props: this.props,
      params: { bizId: id, fileBizType: 'YEARAUDIT_MANA' },
      callback: data => {
        if (!data) return;
        this.setState({ fileList: data });
      },
    });
  };

  componentWillReceiveProps(nextProps) {
    const { id } = nextProps;
    if (this.props.id !== id) {
      this.setState({ id });
      this.queryFileList(id);
    }
  }

  componentDidMount() {
    const {
      verification: { detail },
      id,
    } = this.props;
    if (id) {
      this.setState({ id });
      this.queryFileList(id);
    }

    // 查询字典：年审类型
    this.props.dispatch({
      type: 'common/querytDictByCode',
      payload: { code: 'INSPECTION-TYPE' },
    });
    //币种：
    this.props.dispatch({
      type: 'common/querytDictByCode',
      payload: { code: 'currency-type' },
    });
  }

  callback = key => {
    this.setState({
      activeKey: key,
    });
  };

  render() {
    const {
      list,
      type,
      verification: { detail },
      isMobile,
      dictObject,
    } = this.props;

    const { id, activeKey, previewImage, fileList } = this.state;

    const customPanelStyle = {
      borderRadius: 4,
      marginBottom: 24,
      border: 0,
      overflow: 'hidden',
    };
    const details = detail[id];
    const currencyType = details
      ? formatCodeVal(dictObject['currency-type'], details.currencyType)
      : '';
    const annualAuditType = details
      ? formatCodeVal(dictObject['INSPECTION-TYPE'], details.annualAuditType)
      : '';
    const feeCost = details ? formatPrice(details.feeCost) : '';

    const fields = [
      { key: 'annualNo', name: '单据号' },
      { key: 'cartPlateNo', name: '车牌号' },
      { key: 'ownCompanyName', name: '所属公司' },
      { key: 'yearAuditTime', name: '时间' },
      { key: 'cardCode', name: '证件号码' },
      { key: annualAuditType, name: '类型', isConst: true },
      { key: 'yearAuditName', name: '年审人' },
      { key: feeCost, name: '年审金额', isConst: true },
      { key: currencyType, name: '币种', isConst: true },
      { key1: 'expiryStartTime', key2: 'expiryEndTime', name: '有效期', isRegion: true },
      { key: 'nextAnnualTime', name: '下次年审时间' },
      { key: 'remarks', name: '备注', isRow: true },
      { key: 'attachments', name: '附件', isRow: true, isFile: fileList },
    ];

    return (
      <div className="CollapseDetails">
        <Collapse activeKey={activeKey} onChange={key => this.callback(key)} bordered={false}>
          {this.paneSize.map((item, panelId) => {
            const panel = detail[id];
            return (
              <Panel
                header={`${panelId === 0 ? '基础信息' : '证件信息'}`}
                key={`${panelId + 1}`}
                style={customPanelStyle}
                extra={false}
              >
                <DetailsList
                  isMobile={isMobile}
                  detilsData={{
                    fields: fields,
                    value: panel,
                    fileList: fileList,
                  }}
                />
              </Panel>
            );
          })}
        </Collapse>
      </div>
    );
  }
}
